<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="./css/qd.css">
 
</head>
<body>
  <div id="bj">
    <div class="modol">
      <img src="images/images/qd.png" class="qd" >
      <img src="images/images/che.png" class="che">
      <audio id="start_up" src="audio/qd.mp3" controls="controls" ss style="display: none"></audio>
      <audio id="Brisk" src="audio/汽车背景音乐.mp3" controls="controls"  style="display: none"></audio>
      <audio id="ether" src="audio/bj.mp3" controls="controls"  style="display: none">  </audio>
    </div>
  </div>
  <div id="jb">
        <div class="tp">
            <img class="se1" src="images/images/bj.png" />
            <img class="se11" src="images/images/1.png">
            <img class="se22" src="images/images/22.png"/>
            <img class="se2" src="images/images/2.png" />
            <img class="se32" src="images/images/32.png"/>
            <img class="se3" src="images/images/33.png" />
            <img class="se34" src="images/images/34.png" />
        </div>
   </div>
   <script src="./js/jquery-1.8.3.min.js"></script>
   
  <script>
    (function () {
      console.log($("#bj").width())
      let cartime=0;
      if($("#bj").width()===812){
        $(".qd").css({"margin-top":"2%","background-size":"80%  100%"});
        $(".che").css({"margin-top":"1%","height":"90%","background-size":"90%  100%"});
       cartime=1920;

      }else{
        cartime=2200;
      }
        //横屏
      function resize() {
        var body = document.getElementsByTagName('body')[0];
        var html = document.getElementsByTagName('html')[0];
        var width = html.clientWidth;
        var height =  html.clientHeight;
        var max = width > height ? width : height;
        var min = width > height ? height : width;
        body.style.width = max + "px";
        body.style.height = min + "px";
      }
      resize();
    //启动音乐
    function play2() {
        var music = document.getElementById('start_up');
        if(music.paused){
            music.play();
            setTimeout(function () {   
               music.pause();
            },500);//3500
            setTimeout(function () {
               str();  
            },600);//3600
        }else{
            music.pause();
        }
    }
    //汽车移动和渐变
    function str(){
        //轻快音乐
        var music = document.getElementById('Brisk');
        if(music.paused){
            music.play();
        }else{
            music.pause();
        }
        var tiems=0;
        var n=1;
        
          sst=setInterval(function(){
              bj.style.backgroundPosition=--n+"px";
              tiems+=1;
              // console.log(cartime)
              if(tiems ===cartime){
                //结束轻快音乐
                music.pause();
                //轻快音乐
                var music2 = document.getElementById('ether');
                if(music2.paused){
                    music2.play();
                }else{
                    music2.pause();
                }
                clearInterval(sst);
                $("#bj").fadeOut(3000);
                $("#jb").fadeIn(3000,function(){
                  $(".se1").fadeIn(3000,function(){
                    $(".se22").fadeIn(2000);
                      $(".se2").fadeIn(2000,function(){
                        $(".se32").fadeIn(2000);
                          $(".se3").fadeIn(2000,function(){
                            $(".se34").fadeIn(1000,function(){
                            	setTimeout(function () { window.location.href="3.html";  
					            },2000);
                               
                            });
                           });
                      });
                  });
              });
                
              }
          },-100);
        
    }
    //点击事件
    $(".qd").click(function(){
        play2();
        // setInterval(play2,2000);
        // setTimeout(code,millisec)
        // str();
        $(this).attr("style","display:none");
    })
    //跳转页面
    $(".left img").click(function(){
        window.location.href="4.html";
    })
      window.addEventListener("resize", resize)
    })();
  </script>
  <script src="http://cdnjs.gtimg.com/cdnjs/libs/wxmoment/0.0.2/wxmoment.min.js"></script>
  <script src="./js/qidon.js"></script>
   <script src="./js/flexble.js"></script>
</body>
</html>